<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>作业</title>
	
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			text-decoration: none;
			
		}
		html{
			width: 100%;
			height: 100%;
			min-height: 500px;
			min-width: 800px;
		}
		body{
			width: 100%;
			height:1280px;
			
		}
		.header{
				width:100%;
				height: 62px;
				margin:0 auto;
				
			}
			.logo{
				width: 179px;
				height: 39px;
				float:left;
				margin-top:20px;
				margin-left: 20px;
			}
			.search{
				float:right;
				margin-top:20px;
				margin-right: 20px;
				border:1px solid #ECECEC;
			}
			.txt{
				width: 165px;
				height: 28px;
				float:left;

			}
			.search .btn{
				width:30px;
				height: 30px;
				background: url("images/search2.jpg");
				float:right;
			}
			.nav{
				height: 55px;
				background: url("images/nav_bg.png");
				border-top:1px solid #E1E1E1;
			}
			.nav .nav-con{
				width:980px;
				margin:0 auto;
			}
			.nav li{
				float:left;
			}
			ul{
				list-style: none;
			}
			.nav li a{
				height: 55px;
				display: inline-block;
				background: url("images/nav_bg-line.png") no-repeat right top;
				padding:0 46px;
				line-height: 55px;
				font-weight: 700;
				color:#000;
			}
			.nav li a:hover{
				color:#7CB609;
			}
		#container {
            position: relative;
            width: 1400px;
            height: 769px;
            border: 3px solid #fff;
            overflow: hidden;
            left: 50%;
            transform: translateX(-50%);
           
            border-radius: 10px;
            transition:all 1s ease-in-out 0s;
            
        }
        #container:hover{
        	box-shadow: 0px 8px 6px #888888
        }
        #list {
            position: absolute;
            z-index: 1;
            width: 7000px;
            height: 769px;
        }
        #list img {
            float: left;
            width: 1400px;
            height: 769px;
            transition:all 1s ease-in-out 0s;
        }
        #buttons {
            position: absolute;
            bottom: 20px;
            z-index: 2;
            height: 10px;
            width: 100px;
            left: 50%;
            transform: translateX(-50%);
        }
        #buttons span {
            float: left;
            margin-right: 5px;
            width: 10px;
            height: 10px;
           	border: 1px solid #fff;
            border-radius: 50%;
            background: #333;
            cursor: pointer;
        }
        
        #buttons .on {
            background: orangered;
        }
         .arrow {
            position: absolute;
            top: 160px;
            z-index: 2;
            display: none;
            width: 40px;
            height: 40px;
            
            font-weight: bold;
            line-height: 39px;
            text-align: center;
            color: #000000;
            background-color: #CCCCCC;
            border: 1px solid #000;
            border-radius: 50%;
            cursor: pointer;
            opacity: 0.5;
        }
        
        .arrow:hover {
            background-color: RGBA(0, 0, 0, .7);
            color: #fff;
        }
        img:hover{
			transform:scale(1.2); 
        }
        #container:hover .arrow {
            display: block;
        }
        
        #prev {
            left: 10px;
            font-size: 30px;
        }
        
        #next {
            right: 10px;
            font-size: 30px;
            
        }
        .notice{
				height: 29px;
				border-top:1px solid #EFEFEF;
				border-bottom:1px solid #EFEFEF;
				margin-bottom: 12px;
				background: silver;
			}
			.notice .gg-mid{
				width:100%;
				
				margin:0 auto;
			}
			.notice .l-gg{
				float:left;
				line-height: 29px;
				margin-left: 25px;

			}
			.notice .r-gg{
				float: right;
				margin-right: 25px;
				margin-top: 6px;
			}
			.news{
				width: 1200px;
				margin:0px auto;
				font-size: 10px;
				

			}

			.products,.newslist{
				float: left;
			}
			.news-pub{
				margin-top: 13px;
				margin-left: 6px;
				color:#7AB800;
			}
			.news-pub img{
				vertical-align: middle;
			}
			.clearfix:after{
				content:".";
				display: block;
				height: 0;
				line-height: 0;
				visibility: hidden;
				clear: both;
			}
			.clearfix{
				zoom:1;
			}
			/*左边盒子*/
			.products{
				width: 410px;
				height: 214px;
				border:1px solid #E4E4E4;
				margin-right:12px;
				position: relative;

			}
			
			/*中间盒子*/
			.newslist{
				height: 214px;
				width: 473px ;
				border:1px solid #E4E4E4;
				
			}
			.newslist-list{
				margin:10px 18px 0 23px;
			}
			.newslist-list li{
				height: 27px;
				border-bottom:1px dashed #DCDCDC;
				line-height: 27px;

			}
			.ftcolor{
				color:red;
				font-weight: 700;
			}
			/*右边盒子*/
			.jishu{
				height: 214px;
				width: 290px ;
				border:1px solid #E4E4E4;
				float:right;

			}
			.j-pub{
				height: 12px;
				border-left: 3px solid #7AB800;
				margin-top:10px;
				margin-left:28px;
				padding-left:5px;
			}
			.jishu p{
				margin-top:30px;
				margin-left:28px;
				line-height: 18px;
			}
			.bottom{
				
				bottom: 0;
				width: 100%;
				height: 54px;
				background-color: #C8C8C8;
				text-align: center;
				margin-top: 10px;
				padding:35px;
			}
			
	</style>
</head>
<body>
	<article class="header">
		<div class="logo">
			<img src="logo.png" alt="三星">
		</div>
		<div class="search">
			<input type="text" value="" class="txt">
			<input type="button" class="btn">
		</div>
	</article>
	<article class="nav">
		<div class="nav-con">
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">智能手机</a></li>
				<li><a href="#">平板电脑</a></li>
				<li><a href="#">配件</a></li>
				<li><a href="#">服务支持</a></li>
				<li><a href="#">关于尚合</a></li>
			</ul>
		</div>
	</article>
	<article  id="container" class="container">
		<div id="list" class="list" style="left:0;">
				<a href="http://www.samsung.com/cn/"><img src="body1.png" alt="0" /></a>
				<a href="http://www.whu.edu.cn"><img src="body2.png" alt="1" /></a>
				<a href="http://www.ccnu.edu.cn"><img src="body3.png" alt="2" /></a>
				<a href="http://www.hbue.edu.cn"><img src="body4.png" alt="3" /></a>				
				<a href="http://www.tsinghua.edu.cn"><img src="body5.png" alt="4" /></a>
			</div>
			<div id="buttons" class="buttons">
				<span index="0" class="on"></span>
				<span index="1"></span>
				<span index="2"></span>
				<span index="3"></span>
				<span index="4"></span>
			</div>
			<a href="javascript:;" id="prev" class="arrow">&lt;</a>
	        <a href="javascript:;" id="next" class="arrow">&gt;</a>
	</article>
	<article class="notice">
		<div class="gg-mid">
			<div class="l-gg">
		    	最新公告：尚合Aone智能手机入网证已获取工信部门审批下发。尚合官网
			</div>
			<div class="r-gg">
				<img src="images/zone.png" alt="">
				<img src="images/weibo.png" alt="">
				<img src="images/xinlang.png" alt="">
				<img src="images/renren.png" alt="">
			</div>
		</div>
	</article>
<div class="news clearfix">
	<!-- 左边盒子 -->
		<div class="products">
			<embed src="http://cloud.video.taobao.com/play/u/2510050218/e/1/t/3/p/2/50005782540.swf" quality="high" width="100%" height="100%" align="middle" allowScriptAccess="never" allowFullScreen="true" type="application/x-shockwave-flash" ></embed>
		</div>
		<!-- 左边盒子 -->
		<!-- 中间盒子 -->
		<div class="newslist">
			<div class="news-pub">
				<img src="images/o.jpg" alt="">
				<span>新闻中心</span>
			</div>
			<ul class="newslist-list">
			<li class="ftcolor">致歉公告</li>
			<li>首批尚合Aonet已全部售馨!</li>
			<li>【媒体报导】国产高性价比 尚合Aonet四核手机评测</li>
			<li>我司产品已经通过了国家强制性产品3C认证</li>
			<li>尚合Aone智能手机入网证已经获工信部门审批下发.</li>
			<li>我司通过ISO9001:2008国际质量管理体系认证</li>
		</ul>
		</div>
		
		<!-- 中间盒子 -->
		<!-- 右边盒子 -->
		<div class="jishu">
			<div class="news-pub">
				<img src="images/o.jpg" alt="">
				<span>技术与支持</span>
			</div>
			<div class="j-pub">售后服务</div>
			<div class="j-pub">投诉与建议</div>
			<div class="j-pub">联保网点</div>
			<div class="j-pub">常见问题FAQ</div>
			<p>深圳市汇聚众合科技发展有限公司<br /> 服务热线：400-633-7922</p>
		</div>
		<!-- 右边盒子 -->
	</div>
	
	<article class="bottom">
		<p>深圳市会居中和优先公司深圳市会居中和优先公司深圳市会居中和优先公司深圳市<br>会居中和优先公司深圳市会居中和优先公司深圳市会居中和优先公司</p>
	</article>
	<script type="text/javascript">
			window.onload = function() {
            var list = document.getElementById('list');
            var prev = document.getElementById('prev');
            var next = document.getElementById('next');

            function animate(offset) {
                //获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
                //且style.left获取的是字符串，需要用parseInt()取整转化为数字。
                var newLeft = parseInt(list.style.left) + offset;
                list.style.left = newLeft + 'px';
                 if(newLeft<-5600){
      			list.style.left = 0 + 'px';
 				}
 				if(newLeft>0){
      			list.style.left = -5600 + 'px';
 				}
 			}

            
            var buttons = document.getElementById('buttons').getElementsByTagName('span');
            var index = 0;

            function buttonsShow() {
                //这里需要清除之前的样式
                for (var i = 0; i < buttons.length; i++) {
                    if (buttons[i].className == 'on') {
                        buttons[i].className = '';
                    }
                }
                //数组从0开始，故index需要-1
                buttons[index].className = 'on';
            }

            prev.onclick = function() {
                index -= 1;
                if (index < 0) {
                    index = 4;
                }
                buttonsShow();
                animate(1400);
            }
            next.onclick = function() {
                //由于上边定时器的作用，index会一直递增下去，我们只有5个小圆点，所以需要做出判断
                index += 1;
                if (index > 4) {
                    index = 0;
                }
                buttonsShow();
                animate(-1400);
            }
            var timer;
			function play() {
    			timer = setInterval(function () {
        		next.onclick()
    			}, 4000)
			}
			play();
			var container = document.getElementById('container');

            function stop() {
                clearInterval(timer);
            }
            container.onmouseover = stop;
            container.onmouseout = play;
            for (var i = 0; i < buttons.length; i++) {
            
            	(function(i){
            		buttons[i].onclick = function () {
                // 在浏览器的控制台打印一下，看看结果
                //全局变量污染
                //使用闭包
                console.log(i);

                /* 偏移量获取：这里获得鼠标移动到小圆点的位置，用this把index绑定到对象buttons[i]上，去谷歌this的用法  */
                /* 由于这里的index是自定义属性，需要用到getAttribute()这个DOM2级方法，去获取自定义index的属性*/
                var clickIndex = parseInt(this.getAttribute('index'));
                var offset = 1400 * (index - clickIndex);
                animate(offset); //存放鼠标点击后的位置，用于小圆点的正常显示 
                index = clickIndex;
                buttonsShow();
            	}
            	})(i)
            	
            
            
        }
         
   }
		</script>
</body>
</html>